<script setup>
import {useRoute} from "vue-router";
import {useUserStore} from "@/store/user.js";
import {useIndexStore} from "@/store/main";
import {onMounted} from "vue";

const route = useRoute()
const userStore = useUserStore()
const indexStore = useIndexStore()

const socket = indexStore.get_socket()

onMounted(() => {
  socket.on('agree', data => {
    userStore.set_inform_list()
  })

  socket.on('un_agree', data => {
    userStore.set_inform_list()
  })
})

const agree = _id => {
  socket.emit('agree', {_id})
}

const un_agree = _id => {
  socket.emit('un_agree', {_id})
}
</script>

<template>
  <div class="h-svh overflow-hidden">
    <div class="w-full h-[10%] p-5 border-b-2">
      <div v-if="route.query.type === 'linkman' ">好友通知</div>
      <div v-else>群通知</div>
    </div>
    <el-scrollbar>
      <div class="w-full h-[80%] flex flex-wrap justify-center overflow-auto *:m-5">
        <template v-if="route.query.type === 'linkman'" v-for="inform in userStore.inform">
          <el-card v-if="inform.receiver._id === userStore.user._id" class="w-full" shadow="always">
            <div class="flex justify-between">
              <div class="flex">
                <div class="flex justify-center items-center">
                  <el-avatar :size="50" src="/cover.jpg"/>
                </div>
                <div class="ml-5">
                  <div>{{ inform.sender.name }}</div>
                  <div>{{ inform.title }}</div>
                </div>
              </div>
              <div class="flex justify-center items-center">
                <el-dropdown v-if="inform.status === 'wait' " trigger="click" split-button @click="agree(inform._id)">
                  同意
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="un_agree(inform._id)">拒绝</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
                <div v-else-if="inform.status === 'agree' ">已同意</div>
                <div v-else-if="inform.status === 'refuse' ">已拒绝</div>
              </div>
            </div>
          </el-card>
          <el-card v-if="inform.sender._id === userStore.user._id" class="w-full" shadow="always">
            <div class="flex justify-between">
              <div class="flex">
                <div class="flex justify-center items-center">
                  <el-avatar :size="50" src="/cover.jpg"/>
                </div>
                <div class="ml-5">
                  <div>{{ inform.sender.name }}</div>
                  <div>{{ inform.title }}</div>
                </div>
              </div>
              <div class="flex justify-center items-center">
                <div v-if="inform.status === 'agree' ">已同意</div>
                <div v-else-if="inform.status === 'refuse'">被拒绝</div>
                <div v-else-if="inform.status === 'wait'">等待验证</div>
              </div>
            </div>
          </el-card>
        </template>
        <template v-else v-for="inform in userStore.inform">
          <el-card v-if="inform.receiver._id === userStore.user._id" class="w-full" shadow="always">
            <div class="flex justify-between">
              <div class="flex">
                <div class="flex justify-center items-center">
                  <el-avatar :size="50" src="/cover.jpg"/>
                </div>
                <div class="ml-5">
                  <div>{{ inform.sender.name }}</div>
                  <div>{{ inform.title }}</div>
                </div>
              </div>
              <div class="flex justify-center items-center">
                <el-dropdown trigger="click" split-button @click="userStore.agree_add_user(inform,'linkman')">
                  同意
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="userStore.un_agree_add_user(inform,'linkman')">拒绝</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </div>
          </el-card>
          <el-card v-if="inform.sender._id === userStore.user._id" class="w-full" shadow="always">
            <div class="flex justify-between">
              <div class="flex">
                <div class="flex justify-center items-center">
                  <el-avatar :size="50" src="/cover.jpg"/>
                </div>
                <div class="ml-5">
                  <div>{{ inform.sender.name }}</div>
                  <div>{{ inform.title }}</div>
                </div>
              </div>
              <div class="flex justify-center items-center">
                <div v-if="inform.agree">已同意</div>
                <div v-else-if="inform.status">被拒绝</div>
                <div v-else>等待验证</div>
              </div>
            </div>
          </el-card>
        </template>
      </div>
    </el-scrollbar>
  </div>
</template>

<style scoped>

</style>